/**
 * 购物车类封装
 */
class cartList {
    constructor(id) {
        this.myCartlist = JSON.parse(localStorage.getItem("myCartlist")) || [];
        this.tableElem = document.querySelector(id);
        this.priceElem = this.tableElem.nextElementSibling;
        this.allState = false;
    }
    /**
     * 购物车列表渲染
     */
    cartListshow() {
        //  表格头部
        let str1 = `
         <tr>
         <th>
         <input type="checkbox" class="allcheck" ${this.allState == true ? "checked" : ""}>
         <p>全选<p>
         </th>
         <th>商品名称</th>
         <th>单价</th>
         <th>数量</th>
         <th>小计</th>
         <th>操作</th>
         </tr>
         `
        //  购物车内容
        let str2 = this.myCartlist.map(item => {
            return `
            <tr>
            <td><input type="checkbox" id="${item.id}" class="onecheck" ${item.state == true ? "checked" : ""}></td>
            <td><img src="${item.url}"><span>${item.title}</span></td>
            <td>￥${item.price}</td>
            <td>
            <input type="button" value="-" id=${item.id} ${item.num <= 0 ? "disabled" : ""}><input type="text" value="${item.num}"><input type="button" value="+" id="${item.id}">
            </td>
            <td>￥${item.allprice}</td>
            <td id="${item.id}">删除</td>
            </tr>
            `
        }).join("");
        //
        this.tableElem.innerHTML = str1 + str2;
    }

    /**
     * 总价渲染
     */
    allpriceShow() {
        //计算被选数量
        let count = this.myCartlist.reduce((s, item) => {
            if (item.state == true) {
                s++;
            }
            return s
        }, 0)
        //总价变化
        let sum = this.myCartlist.reduce((s, item) => {
            return s + item.allprice
        }, 0)
        let str = `
        <div>继续购物</div>
        <p>共<span>${this.myCartlist.length}</span>件商品，已选择<span>${count}</span>件</p>
        <div>去结算</div>
        <div>合计:<span>${sum.toFixed(2)}</span>元</div>
        `
        this.priceElem.innerHTML = str
    }
    /**
     * 给表格绑定事件
     */
    tableEvent() {
        //事件委托方式添加事件
        this.tableElem.addEventListener("click", e => {
            e = e || window.event;
            let target = e.target || e.srcElement;

            //点击的是"+"号
            if (target.value == "+") {
                //找到相应对象
                let obj = this.myCartlist.find(item => target.id == item.id);
                obj.num++;
                // 计数变化
                obj.allprice = obj.price * 100 * obj.num / 100;
            }
            //点击的是"-"号
            if (target.value == "-") {
                //找到相应对象
                let obj = this.myCartlist.find(item => target.id == item.id);
                obj.num--;
                // 计数变化
                obj.allprice = obj.price * 100 * obj.num / 100;
            }
            //全选状态改变
            if (target.className == "allcheck") {
                this.allState = !this.allState;
                this.myCartlist.forEach(item => {
                    item.state = this.allState;
                })
            }
            //单选状态改变
            if (target.className == "onecheck") {
                //找到相应对象
                let obj = this.myCartlist.find(item => target.id == item.id);
                obj.state = !obj.state;
                //判断是否全部选中
                this.allState =this.myCartlist.every(item => {
                    return item.state == true;
                })
            }
            //商品删除
            if(target.innerText=="删除"){
                //找到相应对象
                let index = this.myCartlist.findIndex(item => target.id == item.id);
                //删除相应对象
                this.myCartlist.splice(index,1);
            }
            //上传数据并渲染
            localStorage.setItem("myCartlist", JSON.stringify(this.myCartlist))
            this.cartListshow()
            this.allpriceShow() 
        })
    }
}

let s1 = new cartList("#cartsList")
s1.cartListshow()
s1.allpriceShow()
s1.tableEvent()